<template>
  <div class="index_page">
    <div id="playerBox"></div>
    <div class="head">
      <el-input size="small" prefix-icon="el-icon-search" v-model="input" :placeholder="placeholder"></el-input>
      <h2 v-text="title"></h2>
      <div class="tool_cell">
        <div class="time_cell">{{ date }}  {{ time }}</div>
        <div class="weather_cell">多云 12℃</div>
        <div class="setting"></div>
      </div>
    </div>
    <div class="menu_cell">
      <el-select v-model="value" placeholder="请选择" class="menu_select" popper-class="menu_popper" @change="seleceChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          <div class="flex justify-between"> 
            <span>{{ item.label }}</span>
            <span class="el-icon-caret-right" style="font-size: 16px;" @click.stop="showYD(item)" v-if="item.label !== '全国层级'&&item.YDlist"></span>
          </div>
        </el-option>
      </el-select>
      <div v-for="item in menuList" :key="item.title" :class="{'active_menu': activePath==item.path}" @click="choseMenu(item)">{{ item.title }}</div> 
    </div>
    <div class="content">
      <router-view/>
    </div>
    <div class="yd_dia" v-show="showYDdialog">
      <div class="flex justify-between">
        <span>{{ YDval }}试验站</span>
        <i class="el-icon-close" style="cursor:pointer" @click="showYDdialog=false"></i>
      </div>
      <div class="yd_content">
        <div v-for="item in YDlist" :key="item" @click="choseYD(item)">{{ item }}</div> 
        <!-- <div v-for="item in 14" :key="item" @click="choseYD(`${YDval}样地_${ item<10?'0' + item:item }`)">{{YDval}}样地_{{ item<10?'0' + item:item }}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3';
import { Application, PixelStreamingApplicationStyle, UIElementCreationMode } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3';
export default {
  data() {
    return { 
      YDlist: [],
      date: "",
      time: "",
      input: "",
      value: "全国",
      title: "盐碱地监测大数据平台",
      placeholder: "东营试验站",
      activePath: "/dataAnalysis", 
      menuList: [
        { title: "数据分析", path: "/dataAnalysis", ueName: "P1" },
        { title: "数据汇集", path: "/dataCollection",ueName: "P2" },
        { title: "监控预警", path: "/Warning", ueName: "P3.1" },
        { title: "实时巡检", path: "/realInspection", ueName: "P4" },
      ],
      options: [
        { label: "全国层级", value: "全国" },
        { label: "白银试验站", value: "白银" },
        { label: "大庆试验站", value: "大庆" },
        { label: "东营试验站", value: "东营", YDlist: ["农高区试验田","渤海农场试验田"] },
        { label: "鄂尔多斯试验站", value: "鄂尔多斯" },
        { label: "盘锦试验站", value: "盘锦" },
        { label: "朔州试验站", value: "朔州" },
        { label: "大安碱地生态试验站", value: "大安碱地生态" },
        { label: "白城试验站", value: "白城" },
        { label: "银川试验站", value: "银川" },
        { label: "喀什试验站", value: "喀什" },
        { label: "巴彦淖尔试验站", value: "巴彦淖尔" },
        { label: "德州试验站", value: "德州" },
        { label: "石河子试验站", value: "石河子" },
        { label: "锡林郭勒试验站", value: "锡林郭勒" },
        { label: "曲周试验站", value: "曲周" },
      ], 
      YDval: null,
      showYDdialog: false,
      Streaming: null,
    }
  },
  mounted() { 
    this.$nextTick(()=>{
      this.getTime();
    }); 
    
    this.menuList.forEach(item => {
      if(this.$route.path.includes(item.path)){
        this.activePath = item.path;
      }
    }); 
    // this.getModel();
    this.$bus.$on("send-Message",(res)=>{
      this.sendMessage(res);
    });  
  },
  methods: {
    getModel(){ 
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
  

      // Create a config object创建配置
      const config = new Config({ useUrlParams: true ,
      initialSettings: {
          ss: "ws://192.168.1.52:801",
          AutoConnect: true,
          StartVideoMuted: true,
          HoveringMouse: true, 
          //MatchViewportRes:true,//自适应分辨率，在编辑器模式下禁用
      }});


      // Create a Native DOM delegate instance that implements the Delegate interface class
      const stream = new PixelStreaming(config);  
      //设置推流UI
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode),
        //左侧设置按钮——关闭
        settingsPanelConfig: {isEnabled:true,visibilityButtonConfig:{creationMode:UIElementCreationMode.Disable}},
        //左侧状态面板——关闭
        statsPanelConfig:{isEnabled : true,visibilityButtonConfig : { creationMode : UIElementCreationMode.Disable }},
        //左侧全屏按钮——关闭
        fullScreenControlsConfig: {creationMode: UIElementCreationMode.Disable,},
        //左下信号强度指示器——关闭
        videoQpIndicatorConfig:{disableIndicator:true},  
          
      });
      this.StreamingApplication = application;
      let playerBox = document.getElementById("playerBox")
      playerBox.appendChild(application.rootElement);

      stream.addResponseEventListener("handle_responses", this.myHandleResponseFunction)
      this.Streaming = stream;
 
    },
    myHandleResponseFunction(response){ 
      console.log("**********接收到UE消息：",response);   
      let _this = this; 
      if(response.includes("传感器")){
        this.$bus.$emit('sensor-message', response);   
      };
      if(response == "农高区试验田弹窗1"){
        this.$bus.$emit('show-testField', response);   
      };
        
    },
    sendMessage(data){
      // this.Streaming.emitUIInteraction(data); 
      // console.log(data,"sendMessage******************"); 
    },
    seleceChange(val){  
      this.$bus.$emit('change-select', val);   
      this.sendMessage(`${val}试验站`);
      
    },
    showYD(item){ 
      this.showYDdialog = true;
      this.YDval = item.value;
      this.YDlist = item.YDlist;
    },
    choseYD(data){
      this.showYDdialog = false;
      this.value = data;
      this.$bus.$emit('change-select', data);   
      this.sendMessage(data);
    },
    getTime(){
      let _this = this;
      setInterval(function () {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        month = month < 10 ? "0" + month : month;
        let day = date.getDate(); // 日
        day = day < 10 ? "0" + day : day;
        _this.date = year + "." + month + "." + day;

        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        _this.time = `${hour}:${minute}:${second}`
      }, 1000);
    }, 
    choseMenu(item){  
      this.activePath = item.path;
      this.$router.push(item.path); 
      this.sendMessage(item.ueName); 
    },
  },
  watch: {
    value(newVal, oldVal){ 
      if(newVal.includes("试验田")){
        this.$bus.$emit('play-video', newVal);   
      }
    }
  }, 
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/index.scss";    
.head{
  position: relative;
  z-index: 10;
}

#playerBox{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; 
  z-index: 1;
}

.menu_select{ 
  position: absolute;
  left: -12vw;
}

.yd_dia{ 
  position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
  left: 34%;
  top: 16vh;
  padding: 16px;
  background-color: rgba($color: #0D1731, $alpha: 0.46);
  border-radius: 10px;
  z-index: 99;
  backdrop-filter: blur(10px);
  
  font-size: 14px;
  >div:nth-child(1){
    color: #1FD7FF;
    > i{
      color: #1FD7FF;
      float: right;
      font-weight: 600;
    }
  }
  .yd_content{ 
    color: #fff;
    margin-top: 12px;
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    div{
      cursor: pointer;
      text-align: center;
      &:hover{
        color: #1FD7FF;
      }
    }
  }
}

</style>

<style lang="scss">
.menu_popper{
  background-color: #0D173175 !important;
  border: none !important; 


  .popper__arrow::after{
    border-bottom-color: #0D173180 !important; 
  }

  .el-select-dropdown__item{
    color: #1FD7FF;
    &:hover{
      background-color: #0D173190 !important;
    }
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: #0D173190 !important;
  }
  
}
</style>